<template>
  <div>

    <div v-if="wechatInfo.id">
      <ul>
        <li>
          <div class="title">微信头像</div>
          <div class="content">
            <el-image :src="wechatInfo.headimgurl"></el-image>
          </div>
        </li>
        <li class="normal">
          <div class="title">昵称</div>
          <div class="content">{{ wechatInfo.nickname }}</div>
        </li>
        <li class="normal">
          <div class="title">性别</div>
          <div class="content">{{ ['未知', '男', '女'][wechatInfo.sex] }}</div>
        </li>
        <li class="normal">
          <div class="title">国家</div>
          <div class="content">{{ wechatInfo.country }}</div>
        </li>
        <li class="normal">
          <div class="title">省份</div>
          <div class="content">{{ wechatInfo.province }}</div>
        </li>
        <li class="normal">
          <div class="title">城市</div>
          <div class="content">{{ wechatInfo.city }}</div>
        </li>
        <li class="normal">
          <div class="title">初次绑定时间</div>
          <div class="content">{{ wechatInfo.createTime }}</div>
        </li>
        <li class="normal">
          <div class="title">更新时间</div>
          <div class="content">{{ wechatInfo.updateTime }}</div>
        </li>
        <li>
          <div class="title"></div>
          <div class="content">
            <el-button type="primary" icon="el-icon-s-promotion" @click="sendCode">验证码测试</el-button>
            <el-button type="danger" icon="el-icon-s-check" @click="unbindWechat">解绑</el-button>
            <el-button type="warning" icon="el-icon-refresh" @click="wechatInfo={}">重新绑定</el-button>
          </div>
        </li>
      </ul>
    </div>
    <div v-else style="text-align: center">
      请使用微信扫描以下二维码绑定，绑定成功后会自动刷新。
      <br>
      若未刷新，请手动点击下面刷新按钮。
      <div style="text-align: center">
        <el-image :src="src" style="width: 200px;height: 200px"/>
      </div>
      <el-button type="warning" icon="el-icon-refresh" @click="getBindInfo">刷新</el-button>
    </div>
  </div>
</template>

<script>
import {getBindWechatInfo, unbindWechat} from "@/api/system/user";
import request from "@/utils/request";

export default {
  name: "bindWechat",
  props: {
    user: {
      type: Object
    }
  },
  data() {
    let userName = this.user.userName;
    return {
      src: process.env.VUE_APP_BASE_API + '/system/user/loginCode/' + userName,
      wechatInfo: {}
    };
  },
  mounted() {
    //获取绑定信息
    this.getBindInfo();

    //绑定完成事件
    window.globalEventHandler.$on('bindSuccess', evt => {
      this.$modal.msgSuccess('操作完成！');
      this.getBindInfo();
    })
  },
  destroyed() {
    window.globalEventHandler.$off('bindSuccess');
  },
  methods: {
    getBindInfo() {
      getBindWechatInfo().then(res => {
        this.wechatInfo = res.data || {};
      })
    },
    //解绑微信
    unbindWechat() {
      this.$modal.confirm('确认要解绑微信？').then(() => {
        unbindWechat(this.wechatInfo.id).then((res) => {
          this.$modal.msgAlert(res);
          this.getBindInfo();
        })
      })
    },

    sendCode() {
      request({
        url: '/system/user/sendVerificationCode',
        params: {
          openid: this.wechatInfo.openid
        }
      }).then(res => {
        this.$modal.msgAlert(res);
      })
    }
  }
}
</script>

<style scoped>
ul, li {
  list-style: none;
}

li .title {
  display: inline-block;
  width: 135px;
  text-align: left;
  font-weight: bolder;
}

li .content {
  display: inline-block;
  min-width: 250px;
}

li {
  border-bottom: 1px solid #e7eaec;
  padding: 12px;
}

li.normal {
  height: 45px;
}
</style>
